<style>
@media print {
  ._wz_contract {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_cent_main _wz_contract" ref="contract">
    <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">打印</Button>
    <div style="text-align: center;font-size: 20px;font-weight: bold;line-height: 30px;margin: 0 0 10px;">{{ selectData.typeName + formTitle }}</div>
    <div v-if="formTitle == '聘用合同'">
      <div>
        <span style="font-size: 15px;font-weight: bold;">甲方：</span>
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{ !!selectData.coreDriverContract.deptName ? selectData.coreDriverContract.deptName : '--' }}</span>
      </div>
      <div>
        <span style="font-size: 15px;font-weight: bold;">乙方：</span>
        <span style="display: inline-block;border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;margin: 0 50px 0 0;">{{ !!selectData.coreDriverContract.driverName ? selectData.coreDriverContract.driverName : '--' }}</span>
        <span style="font-size: 15px;font-weight: bold;">身份证号：</span>
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{ !!selectData.identifyNum ? selectData.identifyNum : '--' }}</span>
      </div>
      <div>
        <span style="font-size: 15px;font-weight: bold;">合同期限：</span>
        从
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{!!selectData.coreDriverContract.employSignDate?selectData.coreDriverContract.employSignDate:'--'}}</span>
        起到
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{!!selectData.coreDriverContract.employSignEndDate?selectData.coreDriverContract.employSignEndDate:'--'}}</span> 止；合同期限为
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{ !!selectData.coreDriverContract.employContentLimit ? selectData.coreDriverContract.employContentLimit : '--' }} </span>
        年；
      </div>
    </div>
    <div v-if="formTitle == '承诺书'">
      <div>
        <span style="font-size: 15px;font-weight: bold;">告知方：</span>
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{ !!selectData.coreDriverContract.deptName?selectData.coreDriverContract.deptName:'--' }}</span>
      </div>
      <div>
        <span style="font-size: 15px;font-weight: bold;">被告知人：</span>
        <span style="border-bottom: 1px solid #515a6e;display: inline-block;padding: 0 10px;">{{ !!selectData.coreDriverContract.driverName?selectData.coreDriverContract.driverName:'--' }}</span>
      </div>
    </div>

    <div style="margin: 0 0 30px;">
      <div v-if="formTitle == '聘用合同'"  v-html="selectData.coreDriverContract.employContent"></div>
      <div v-if="formTitle == '承诺书'"  v-html="selectData.coreDriverContract.promiseContent"></div>
      <div v-if="formTitle == '责任状'"  v-html="selectData.coreDriverContract.dutyContent"></div>
      <div v-if="formTitle == '职业危害告知书'"  v-html="selectData.coreDriverContract.noticeContent"></div>
    </div>

    <div v-if="formTitle == '聘用合同'" style="text-align: right;">
      <Row style="margin: 20px 0 10px;line-height: 55px;">
        <i-col span="12" style="text-align: left;position: relative;">
          <template v-if="!!selectData.coreDriverContract.signatureImg && !!selectData.coreDriverContract.signatureState">
            <img :src="apiUrl.imgUrl + selectData.coreDriverContract.signatureImg"  @error="public.imgDispose" style="width: 148px;height: 148px;position: absolute;left: 80px;top: -24px;"/>
          </template>
          <span style="font-size: 15px;font-weight: bold;">甲方(盖章)：</span>
          {{ !!selectData.coreDriverContract.deptName ? selectData.coreDriverContract.deptName : '--' }}
          <div>
            <span style="margin: 0 30px 0 0;">年</span>
            <span style="margin: 0 30px 0 0;">月</span>
            <span style="margin: 0 30px 0 0;">日</span>
          </div>
        </i-col>
        <i-col span="12">
          <span style="font-size: 15px;font-weight: bold;"> 乙方(签名)：</span>
          <template v-if="!!selectData.coreDriverContract.employSignImg">
            <img style="vertical-align: middle;width: 90px;height: 55px;" :src="!!selectData.coreDriverContract.employSignImg?apiUrl.imgUrl+selectData.coreDriverContract.employSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
          </template>
          <span v-else style="display: inline-block;vertical-align: middle;width: 90px;height: 55px;"></span>
          <div style="letter-spacing: 2px;">
            <template v-if="selectData.coreDriverContract.employSignDate">
              {{selectData.coreDriverContract.employSignDate}}
            </template>
            <template v-else>
              <span style="margin: 0 30px 0 0;">年</span>
              <span style="margin: 0 30px 0 0;">月</span>
              <span style="margin: 0 30px 0 0;">日</span>
            </template>
          </div>
        </i-col>
      </Row>
    </div>

    <div v-if="formTitle == '承诺书'">
      <div style="margin: 0 0 10px;line-height: 55px;">
        <span style="font-size: 15px;font-weight: bold;">{{selectData.typeName}}签名：</span>
        <template v-if="!!selectData.coreDriverContract.promiseSignImg">
          <img style="vertical-align: middle;width: 90px;height: 55px;" :src="!!selectData.coreDriverContract.promiseSignImg?apiUrl.imgUrl+selectData.coreDriverContract.promiseSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
        </template>
        <span v-else style="display: inline-block;vertical-align: middle;width: 90px;height: 55px;"></span>

        <div style="float: right;letter-spacing: 2px;position: relative;padding: 0 0 100px 0;">
          <template v-if="!!selectData.coreDriverContract.signatureImg && !!selectData.coreDriverContract.signatureState">
            <img :src="apiUrl.imgUrl + selectData.coreDriverContract.signatureImg"  @error="public.imgDispose" style="width: 148px;height: 148px;position: absolute;left: -12px;top: -44px;"/>
          </template>
          <template v-if="selectData.coreDriverContract.promiseSignDate">
            {{selectData.coreDriverContract.promiseSignDate}}
          </template>
          <template v-else>
            <span style="margin: 0 30px 0 0;">年</span>
            <span style="margin: 0 30px 0 0;">月</span>
            <span style="margin: 0 30px 0 0;">日</span>
          </template>
        </div>
      </div>
    </div>

    <div v-if="formTitle == '责任状'">
      <div style="font-size: 15px;font-weight: bold;margin: 0 0 10px;line-height: 55px;">部门负责人(签字)：</div>
      <div style="font-size: 15px;font-weight: bold;margin: 0 0 10px;line-height: 55px;">
        <span>责任人：</span>

        <template v-if="!!selectData.coreDriverContract.dutySignImg">
          <img style="vertical-align: middle;width: 90px;height: 55px;" :src="!!selectData.coreDriverContract.dutySignImg?apiUrl.imgUrl+selectData.coreDriverContract.dutySignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
        </template>
        <span v-else style="display: inline-block;vertical-align: middle;width: 90px;height: 55px;"></span>

      </div>
      <div style="text-align: right;letter-spacing: 2px;position: relative;padding: 0 0 30px 0;">
        <template v-if="!!selectData.coreDriverContract.signatureImg && !!selectData.coreDriverContract.signatureState">
          <img :src="apiUrl.imgUrl + selectData.coreDriverContract.signatureImg"  @error="public.imgDispose" style="width: 148px;height: 148px;position: absolute;right: 16px;top: -80px;"/>
        </template>
        <template v-if="selectData.coreDriverContract.dutySignDate">
          {{selectData.coreDriverContract.dutySignDate}}
        </template>
        <template v-else>
          <span style="margin: 0 30px 0 0;">年</span>
          <span style="margin: 0 30px 0 0;">月</span>
          <span style="margin: 0 30px 0 0;">日</span>
        </template>
      </div>
    </div>

    <div v-if="formTitle == '职业危害告知书'">
      <Row>
        <i-col span="12" style="position: relative;">
          <div style="font-size: 15px;font-weight: bold;margin: 0 0 30px;line-height: 50px;">告知方（盖章）：</div>
          <template v-if="!!selectData.coreDriverContract.signatureImg && !!selectData.coreDriverContract.signatureState">
            <img :src="apiUrl.imgUrl + selectData.coreDriverContract.signatureImg"  @error="public.imgDispose" style="width: 148px;height: 148px;position: absolute;left: 120px;top: -44px;"/>
          </template>
          <div>
            <span style="margin: 0 30px 0 0;">年</span>
            <span style="margin: 0 30px 0 0;">月</span>
            <span style="margin: 0 30px 0 0;">日</span>
          </div>
        </i-col>
        <i-col span="12" style="text-align: right;">
          <div style="font-size: 15px;font-weight: bold;margin: 0 0 30px;line-height: 55px;">
            <span>被告知人（签名）：</span>


            <template v-if="!!selectData.coreDriverContract.noticeSignImg">
              <img style="vertical-align: middle;width: 90px;height: 55px;" :src="!!selectData.coreDriverContract.noticeSignImg?apiUrl.imgUrl+selectData.coreDriverContract.noticeSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </template>
            <span v-else style="display: inline-block;vertical-align: middle;width: 90px;height: 55px;"></span>

          </div>
          <div style="letter-spacing: 2px;">
            <template v-if="selectData.coreDriverContract.noticeSignDate">
              {{selectData.coreDriverContract.noticeSignDate}}
            </template>
            <template v-else>
              <span style="margin: 0 30px 0 0;">年</span>
              <span style="margin: 0 30px 0 0;">月</span>
              <span style="margin: 0 30px 0 0;">日</span>
            </template>
          </div>
        </i-col>
      </Row>
    </div>




  </div>
</template>
<script>
export default {
  props: ['selectData', 'formTitle'],//接收来自父组件的数据
  data() {
    return {}
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.contract) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
  ._wz_contract{
    padding: 16px;
    line-height: 30px;
  }
</style>
